<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>订单修改</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet"
          th:href="@{/resource/layui/css/layui.css}"
          media="all">
    <script type="text/javascript"
            th:src="@{/resource/js/jquery-3.6.0.min.js}"></script>

</head>
<body>

<fieldset class="layui-elem-field layui-field-title"
          style="margin-top: 20px;">
    <legend>订 单 修 改</legend>
</fieldset>

<form class="layui-form" action="">

    <div class="layui-form-item">
        <label class="layui-form-label">订单编号</label>
        <div class="layui-input-inline">
            <input type="text" name="orderId" lay-verify="orderId"
                   autocomplete="off" disabled class="layui-input  layui-disabled" value="${ updateOrder.orderId }">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">订购客户</label>
        <div class="layui-input-inline">
            <input type="text" name="orderUser" lay-verify="orderUser"
                   autocomplete="off" disabled class="layui-input layui-disabled" value="${ updateOrder.orderUser }">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">订购产品</label>
        <div class="layui-input-inline">
            <input type="text" name="orderProducts" lay-verify="orderProducts"
                   autocomplete="off" disabled class="layui-input layui-disabled"
                   value="${ updateOrder.orderProducts }">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">订购数量</label>
        <div class="layui-input-inline">
            <input type="text" name="orderQuantity" lay-verify="orderQuantity"
                   autocomplete="off" class="layui-input" value="${ updateOrder.orderQuantity }">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">税前单价</label>
        <div class="layui-input-inline">
            <input type="text" name="unitPriceBeforeTax"
                   lay-verify="unitPriceBeforeTax" autocomplete="off"
                   class="layui-input" value="${ updateOrder.unitPriceBeforeTax }">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">单位</label>
        <div class="layui-input-block">
            <input type="radio" name="unit" value="元" title="元 ￥" checked="">
            <input type="radio" name="unit" value="美元" title="美元 $">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-inline">
            <select id="state" name="state" lay-filter="state">
                <option value="${ updateOrder.state }">${ updateOrder.state }</option>
                <option value="未开始">未开始</option>
                <option value="已开始">已开始</option>
                <option value="已完成">已完成</option>
                <option value="订单取消">订单取消</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">订购日期</label>
        <div class="layui-input-inline">
            <input type="text" name="subscriptionDate" id="subscriptionDate"
                   lay-verify="date" autocomplete="off" class="layui-input" value="${ updateOrder.subscriptionDate }">
        </div>
    </div>

    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">要求日期</label>
        <div class="layui-input-inline">
            <input type="text" name="requiredDate" id="requiredDate"
                   lay-verify="date" autocomplete="off" class="layui-input" value="${ updateOrder.requiredDate }">
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">订单要求</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" class="layui-textarea" id="orderRequirements" name="orderRequirements"
                      value="${ updateOrder.orderRequirements }"></textarea>
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">相关图片</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" class="layui-textarea" id="relatedPictures" name="relatedPictures"
                      value="${ updateOrder.relatedPictures }"></textarea>
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">订单附件</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" class="layui-textarea" id="orderAttachment" name="orderAttachment"
                      value="${ updateOrder.orderAttachment }"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit=""
                    lay-filter="submitButton">立即提交
            </button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script th:src="@{/resource/layui/layui.js}"
        charset="utf-8"></script>

<script type="text/javascript">
    window.onload = function () {
        document.getElementById("orderRequirements").value = "${ updateOrder.orderRequirements }";
        document.getElementById("relatedPictures").value = "${ updateOrder.relatedPictures }";
        document.getElementById("orderAttachment").value = "${ updateOrder.orderAttachment }";
    }
</script>

<script>
    layui
        .use(
            ['form', 'layedit', 'laydate'],
            function () {
                var form = layui.form;
                var layer = layui.layer;
                var laydate = layui.laydate;

                //监听提交
                form.on('submit(submitButton)', function (data) {
                    $.post("updates", data.field, function (obj) {
                        if (obj.result == 1) {
                            layer.msg(obj.msg, {
                                icon: 1,
                                time: 2000
                            });
                            return false;
                        } else {
                            layer.msg(obj.msg, {
                                icon: 2,
                                time: 2000
                            });
                            return false;
                        }
                    });

                    return false;
                });

                //日期
                laydate.render({
                    elem: '#subscriptionDate'
                });

                laydate.render({
                    elem: '#requiredDate'
                });

            });
</script>

</body>
</html>